<template>
    <div>
       AAAAAAAA
        userId:<input type="text" v-model="userId"/>
        toUserId<input type="text" v-model="toUserId"/>
        
        <el-button type="success" @click="openSocket()">创建连接</el-button>
        <hr>
        <ul>
	    	<li v-for="item in listData" :key="item">---{{item.fromUserId}}--:------{{item.contentText}}</li>
	     </ul>
         <hr/>
	请求参数：<el-input v-model="sendMsg"></el-input>
    
	<button @click="sendMessage()">发送消息</button>
   
	 
    </div>
</template>

<script>
  import SockJS from 'sockjs-client'
  import Stomp from 'stompjs'
  import axios from 'axios'
export default {
    data() {
        return {
            socket:null,
            // 从session中获取
            userId:1,
            // 点击发送消息时候获取
            toUserId:'2',
            sendMsg:"狗蛋！",
            listData:[],
            temp:{ "fromUserId": null, "contentText":null, "toUserId":null },
        }
    },
  methods: {
    openSocket() {
        console.log("uid"+this.userId+"----------towho"+this.toUserId);
      if (typeof WebSocket == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
        //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
        var socketUrl =
          "http://localhost:8061/imserver/" + this.userId;
        socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
        console.log(socketUrl);
        if (this.socket != null) {
          this.socket.close();
          this.socket = null;
        }
        
        //打开事件
        this.socket = new WebSocket(socketUrl);
        //打开事件
        this.socket.onopen = function() {
          console.log("websocket已打开");
          //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        this.socket.onmessage = (msg) => {
          console.log(msg.data+".....................");
          console.log(typeof msg.data);
          if(!msg.data.includes('toUserId') ){
            return;
          }
          this.listData.push(JSON.parse(msg.data));
        };
        //关闭事件
        this.socket.onclose = function() {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        this.socket.onerror = function() {
          console.log("websocket发生了错误");
        };
      }
    },
    sendMessage() {
      if (typeof WebSocket == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");
        console.log(
          '{"toUserId":"' +
             this.toUserId +
            '","contentText":"' +
             this.sendMsg +
            '"}'
        );
        this.socket.send(
          '{"toUserId":"' +
             this.toUserId +
            '","contentText":"' +
             this.sendMsg +
            '"}'
         );
    
    }
    // 弄谁发的啥发的是啥
    this.temp.fromUserId=this.userId;
    this.temp.contentText=this.sendMsg;
    this.listData.push(this.temp);
    this.sendMsg="";
   }
 }
}
</script>

<style>

</style>